<template>
    <div class="crud-container">
        <el-card shadow="never">
            <el-input placeholder="请输入关键字" style="max-width: 280px" />
            <el-button type="primary" class="ml10" @click="onSearch">
                <el-icon>
                    <ele-Search />
                </el-icon>
                查询
            </el-button>
            <el-button type="default" class="ml10" @click="onOpenAdd">
                <el-icon>
                    <ele-Refresh />
                </el-icon>
                重置
            </el-button>
        </el-card>
        <el-card ref="contentBoxRef" shadow="never" class="content-box">
            <div class="toolbar">
                <el-button type="primary" @click="onOpenAdd">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>
                    新增
                </el-button>
                <el-button type="danger">
                    <el-icon>
                        <ele-Delete />
                    </el-icon>
                    删除
                </el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" border row-key="id">
                <el-table-column type="expand">
                    <template #default="props">
                        <DictList :code="props.row.code" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="字典名称" show-overflow-tooltip />
                <el-table-column prop="code" label="字典编码" show-overflow-tooltip />
                <el-table-column label="状态" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == StatusEnum.ENABLE.value" type="success">
                            {{ StatusEnum.ENABLE.label }}
                        </el-tag>
                        <el-tag v-if="scope.row.status == StatusEnum.DISABLE.value" type="warning">
                            {{ StatusEnum.DISABLE.label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="240">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            修改
                        </el-button>
                        <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">
                            <el-icon>
                                <ele-Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="query.pageNum"
                v-model:page-size="query.pageSize"
                class="mt15"
                :pager-count="5"
                :page-sizes="[10, 20, 30]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="onHandleSizeChange"
                @current-change="onHandleCurrentChange"
            />
            <DictTypeForm ref="dictTypeFormRef" @refresh="getTableData" />
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Page } from '@/api/types.ts'
import { Dict } from '@/api/system/dict/types.ts'
import { getDictTypeList, getDictTypeDetail, deleteDictType } from '@/api/system/dict/index.ts'
import { StatusEnum } from '@/enums/StatusEnum.ts'

const DictTypeForm = defineAsyncComponent(() => import('./components/DictTypeForm.vue'))
const DictList = defineAsyncComponent(() => import('./components/DictList.vue'))

const total = ref<number>(0)
const tableData = ref<Dict.Type.Row[]>()
//搜索条件
const query = reactive<Dict.Type.Query>({})
const getTableData = () => {
    getDictTypeList(query).then((resp: Page<Dict.Type.Row>) => {
        tableData.value = resp.list
        total.value = resp.total
    })
}
const onSearch = () => {}

const dictTypeFormRef = ref()
const onOpenAdd = () => {
    dictTypeFormRef.value.openDialog()
}
const onOpenEdit = async (row: Dict.Type.Row) => {
    const item = await getDictTypeDetail(row.id)
    dictTypeFormRef.value.openDialog(item)
}

const onTabelRowDel = (row: Dict.Type.Row) => {
    ElMessageBox.confirm(`此操作将永久删除字典：${row.name}, 是否继续?`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteDictType(row.id + '').then(() => {
            ElMessage.success('删除成功')
            getTableData()
        })
    })
}

const onHandleSizeChange = () => {}

const onHandleCurrentChange = () => {}

onMounted(() => {
    getTableData()
})
</script>
